<template>
	<view class="header-box">
		<view class="header-row">
			<view class="header-item left"><image class="left-icon" @click="Back()" v-show="leftShow" src="../static/left.png" mode=""></image></view>
			<view class="header-item center">{{ title }}</view>
			<view class="header-item right">
				<image class="right-icon" v-if="iconSrc" :src="iconSrc" @click="fnCallback()"></image>
				<text class="right-text" v-if="rightText" @click="fnCallback()">{{rightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: 'zhengfei'
		},
		leftShow: {
			type: Boolean,
			default: false
		},
		iconSrc:{
			type: String,
			default: ''
		},
		rightText:{
			type: String,
			default: ''
		},
		callback:{
			type:Function
		}
	},
	data() {
		return {};
	},
	methods: {
		Back: function() {
			uni.navigateTo();
		},
		fnCallback:function(){
			this.callback();
		}
	}
};
</script>

<style lang="scss">
.header-box {
	background-color: #5c92ff;
	padding-top: 40rpx;
	.header-row {
		height: 100rpx;
		display: flex;
		.header-item {
			height: 100%;
		}
		.left {
			width: 120rpx;
			text-align: center;
			.left-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 40rpx;
			}
		}
		.center {
			flex-grow: 1;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 120rpx;
			letter-spacing: 1rpx;
			color: #ffffff;
			font-weight: bold;
			text-align: center;
		}
		.right {
			width: 120rpx;
			text-align: center;
			.right-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 40rpx;
			}
			.right-text {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 100rpx;
				letter-spacing: 1px;
				color: #ffffff;
			}
		}
	}
}
</style>
